import { Rect, Ellipse, Text, Line, Polygon, Image, Platform } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'
export class Tools {
    constructor(render) {
        this.render = render
        this.app = render.app
        this.imageData = null
    }

    async createImage(data, e) {
        let svg = null
        let datas = null
        if (this.render.result) {
            datas = await this.fetchImage('/api' + data.filePath)

            svg = Platform.toURL(this.changeColor(datas, this.render.color), 'svg')
        } else {
            if (data.filePath.includes('svg')) {
                datas = await this.fetchImage(data.filePath)
                svg = Platform.toURL(this.changeColor(datas, this.render.color), 'svg')
            } else {
                svg = data.filePath
            }
        }
        if (svg) {
            this.app.tree.add(Rect.one({
                editable: true,
                width: 100,
                height: 100,
                name: 'image',
                className: 'model',
                fill: {
                    type: 'image',
                    url: svg,
                    // mode: 'stretch'
                }

            }, e.x - 50, e.y - 50))
        }

    }
    changeColor(sourceFile, color) {
        let newSvg;
        if (/fill=".*?"/.test(sourceFile)) {
            newSvg = sourceFile.replace(/fill=".*?"/g, `fill="${color}"`);  // SVG有默认色
        } else {
            newSvg = sourceFile.replace(/<svg /g, `<svg fill="${color}" `); // 无默认色
        }
        return newSvg
    }

    async fetchImage(filePath) {
        let xhr = null
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest()
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP')
        }
        const okStatus = document.location.protocol === 'file' ? 0 : 200
        xhr.open('GET', filePath, false)
        xhr.overrideMimeType('image/svg+xml')
        xhr.send(null)
        return xhr.status === okStatus ? xhr.responseText : null

    }

    creatRect(type, e, obj) {
        if (type === 'rect') {
            this.app.tree.add(Rect.one({ className: 'model', name: 'rect', width: e.width, height: e.height, editable: true, fill: 'rgba(255,255,255,0)', stroke: '#000', }, obj.x, obj.y))
        } else if (type === 'ellipse') {
            this.app.tree.add(Ellipse.one({ className: 'model', name: 'ellipse', width: e.width, height: e.height, editable: true, fill: 'rgba(255,255,255,0)', innerRadius: 1, stroke: '#000', }, obj.x, obj.y))
        } else if (type === 'text') {
            this.app.tree.add(Text.one({ className: 'model', name: 'text', fontSize: 22, text: 'Text', fill: '#000', stroke: 'rgba(255,255,255,0)', editable: true }, obj.x - 22, obj.y - 18))
        } else if (type === 'line') {
            this.app.tree.add(Line.one({ className: 'model', name: 'line', editable: true, stroke: '#000', strokeWidth: 2, }, obj.x, obj.y))
        } else if (type === 'polygon') {
            this.app.tree.add(Polygon.one({ className: 'model', name: 'polygon', width: e.width, height: e.height, editable: true, fill: 'rgba(255,255,255,0)', stroke: '#000', sides: 3, }, obj.x, obj.y))
        } else if (type === 'arrow') {
            this.app.tree.add(Arrow.one({ className: 'model', name: 'arrow', editable: true, fill: 'rgba(255,255,255,0)', stroke: '#000', sides: 3, strokeWidth: 5 }, obj.x, obj.y))
        }
    }
}